<script lang="ts" setup>
/**
 * Props
 * @label 标签
 *
 * @value 内容
 *
 * @height 组件高度
 *
 * @labelWidth 标签宽度
 * 默认自适应
 *
 * @autoHeight 高度自动
 * 默认 true
 *
 * @column 纵向布局
 * 默认 false
 *
 * @position 内容对齐方式 --left | center | right
 * 默认 right
 *
 * @borderRadius 组件圆角
 * Array<number | string> 参考CSS-border-radius
 *
 * @required 标签必填星符
 *
 * @colon 标签后缀 < : >
 *
 * @boxStyle 自定义容器样式
 *
 * @labelStyle 自定义label样式
 *
 * @valueStyle 自定义value样式
 *
 * Emits
 * @valueClick 点击了value区域
 *
 * Slot 自定义value区域
 */
import Icon from '@C/Icon.vue'
import { hasUnit } from '@U/common'
import type { BaseType, IObj, PropType } from '@/interface'

defineProps({
  label: {
    type: String,
    required: false,
    default: '',
  },
  autoHeight: {
    type: Boolean,
    required: false,
    default: true,
  },
  value: {
    type: String as PropType<BaseType>,
    required: false,
    default: '',
  },
  position: {
    type: String as PropType<'left' | 'center' | 'right'>,
    required: false,
    default: 'right',
  },
  width: {
    type: String,
    required: false,
    default: '',
  },
  height: {
    type: String,
    required: false,
    default: '80',
  },
  labelWidth: {
    type: String,
    required: false,
    default: '',
  },
  borderRadius: {
    type: Object as PropType<Array<number | string>>,
    required: false,
    default: () => (<Array<number | string>>[]),
  },
  required: {
    type: Boolean,
    required: false,
    default: false,
  },
  column: {
    type: Boolean,
    required: false,
    default: false,
  },
  colon: {
    type: Boolean,
    required: false,
    default: false,
  },
  boxStyle: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
  labelStyle: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
  valueStyle: {
    type: Object as PropType<IObj>,
    required: false,
    default: () => ({}),
  },
})
const emits = defineEmits(['valueClick'])

const valueClick = () => emits('valueClick')
</script>

<template>
  <div
    :style="{
      width: `${width ? hasUnit(width) : '100%'}`,
      borderRadius: borderRadius.map((i: number | string) => (`${i}rpx`)),
      flexDirection: column ? 'column' : '',
      ...(autoHeight ? { minHeight: hasUnit(height) } : { height: hasUnit(height) }),
      ...boxStyle
    }"
    class="prm-label-and-value"
  >
    <div
      :style="{
        width: `${labelWidth ? hasUnit(labelWidth) : ''}`,
        height: hasUnit(height),
        lineHeight: hasUnit(height),
        ...labelStyle,
      }"
      class="prm-label"
    >
      <!--<Icon v-if="required" name="icon-required" size="40" />-->
      <span v-if="required" class="star">*</span>
      <!--   不是必填时空出距离和上面文字对齐   -->
      <span v-else style="width: 20rpx" />
      {{ label }} {{ colon ? '：' : '' }}
    </div>
    <div class="prm-value">
      <slot>
        <div
          :style="{
            'text-align': position,
            lineHeight: hasUnit(height),
            ...(autoHeight ? { minHeight: hasUnit(height) } : {}),
            ...valueStyle,
          }"
          class="prm-value-d"
          @tap="valueClick"
        >
          {{ value }}
        </div>
      </slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.prm-label-and-value {
  background: white;
  display: flex;
  font-size: 28rpx;
  .prm-label {
    display: flex;
    align-items: center;
    color: rgba(0, 0, 0, 0.45);
    .star {
      width: 18rpx;
      height: 50rpx;
      line-height: 58rpx;
      font-size: 40rpx;
      color: #FF5657;
      margin-right: 2rpx;
    }
  }
  .prm-value {
    flex: 1 1;
    height: 100%;
  }
  .prm-value-d {
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
